<template>
  <section class="mq-menu">
    <el-row>
      <el-col class="mq-col" :xs="{span:8}" :sm="{span:6}" :md="{span:4}" :lg="{span:3}" :xl="{span:2}"
              v-for="(menu, idx) in menus" :key="idx">
          <menu-item class="mq-menu-item" :title="menu.name"
                     :path="menu.path" :img-url="menu.img_url">
          </menu-item>
      </el-col>
    </el-row>
  </section>
</template>

<script>
import MenuItem from "../elements/MenuItem";

export default {
  name: "Index",
  components: {MenuItem},
  data() {
    return {
      menus: [
        {
          name: "任务",
          path: '/missions',
          img_url: "/images/mission.png",
        },
      ]
    }
  }
}
</script>

<style scoped>
.mq-menu {
  width: auto;
  height: 100%;
  padding: 20px 10px 0;
}

.mq-menu .mq-col {
  padding: 10px;
}

.mq-menu .mq-menu-item {
  width: 100px;
  margin: 0 auto;
}
</style>